<style lang="scss" scoped>
	.top {
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 99;
	}
	.swiper {
		height: 200px;
		image {
			height: 200px;
			width: 100%;
		}
	}
	
</style>

<template>
	<view>
		<view class="top">
			<uni-search-bar @focus="toSearch"></uni-search-bar>
			<tab-title @changeActiveIndex="changeActiveIndex" :title="tabData" :activeIndex="activeIndex"></tab-title>
		</view>
		<view class="content">
			<!-- 轮播 -->
			<swiper circular  class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/1.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/2.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/3.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/4.jpg" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/5.jpg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- {{listData}} -->
			<!-- 列表 -->
			<view class="list">
				<my-list-item v-for="(item, index) in listData" :key="index" :item="item"></my-list-item>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		onMounted,
		ref,
		computed
	} from 'vue';
	const db = uniCloud.database()
	const activeIndex = ref(0)
	const tabData = ref([])
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/search/search'
		})
	}
	const listData = computed(() => {
		if(tabData.value.length === 0) return [];
		return tabData.value[activeIndex.value].children
	})
	const changeActiveIndex = index => {
		activeIndex.value = index
	}

	async function getTabData() {
		// 获取云数据数据  tab
		const resp = await db.collection('tab').get()
		console.log(resp.result.data)
		tabData.value = resp.result.data
	}

	getTabData()
</script>